@import '../../style/index.less';

.h3 {
    font-size: 18px;
    line-height: 30px;
    margin-top: 21px;
    text-align: center;
    color: #110e08;
    margin: 0;
    margin-bottom: 25px;
    margin-top: -15px;

    &:nth-child(3) {
        margin-top: -25px;
    }
}

.container {
    width: 100%;
    background-color: #fff;
    padding: 50px 0 20px;
    margin: 0 auto;

    .center {
        margin-left: 4.6%;
        margin-right: 4.6%;
    }

    .total {
        position: relative;
        width: 62.5%;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        margin-top: -90px;
        z-index: 100;

        .totalItem {
            display: flex;
            text-align: center;
            width: calc(~'33.33% - 10px');
            padding: 10px 0;
            background-color: #fff;
            box-shadow: 7px 7px 32px -10px rgba(0, 0, 0, 0.53);
            border-radius: 8px;

            &:nth-child(2) {
                border-left: 1px solid #eee;
                border-right: 1px solid #eee;
            }

            .total_img {
                width: 51px;
                margin: 0 24px 0 24px;
            }

            .small_img {
                width: 76px;
            }

            .num {
                color: #1787d3;
                font-weight: 700;
                text-align: left;

                > span {
                    &:nth-child(1) {
                        font-size: 28px;
                    }

                    &:nth-child(2) {
                        font-size: 26px;
                    }
                }
            }

            .title {
                font-size: 16px;
                line-height: 1;
                color: #333;
                padding-top: 6px;
            }
        }
    }

    .serve_title,
    .coverage_title,
    .advantage_title,
    .cooperative_title,
    .evaluate_title,
    .partner_title {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 80px;
        // font-size: 30px;
        font-weight: 700;
        color: #000;
        text-align: center;
        margin: 40px 0 15px;

        &::before {
            content: '';
            width: 200px;
            height: 1px;
            background: rgba(0, 0, 0, 0.4);
            opacity: 1;
            margin-right: 40px;
        }

        &::after {
            content: '';
            width: 200px;
            height: 1px;
            background: rgba(0, 0, 0, 0.6);
            opacity: 1;
            margin-left: 40px;
        }
    }

    .doubleEdit {
        width: 100%;
        padding: 0 8% 30px;
        margin: 0 auto;

        .edit_banner {
            width: 100%;
            display: flex;
            gap: 20px;

            .edit_item {
                position: relative;
                flex: 1;
                text-align: center;
                background-color: #f6f6fb;
                box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
                margin-top: 15px;
                border-radius: 4px;
                cursor: pointer;
                user-select: none;
                overflow: hidden;

                &:hover {
                    .desc {
                        opacity: 1;
                        transition: 0.3s;
                    }
                }

                &:nth-child(3) {
                    > img {
                        margin-top: 10px;
                    }
                }

                &:nth-child(1),
                &:nth-child(2) {
                    > img {
                        margin-top: 15px;
                    }
                }

                > img {
                    width: 100%;
                    height: 14.4vw;
                    margin-top: 6px;

                    &.big_img {
                        width: 62%;
                    }
                }

                .double_box {
                    // display: flex;
                    // justify-content: space-between;
                    padding: 6px 10px;
                    background: #fff;
                }

                .desc {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    color: #fff;
                    padding: 10px 10px 20px;
                    background: rgba(0, 0, 0, 0.65);
                    text-align: left;
                    opacity: 0;
                    transition: 0.3s;
                    z-index: 500;
                }
            }
        }
    }

    .evaluate_body {
        background-color: @brown2;
        // background: url('~@/style/imgs/homePage/pingjia.png') no-repeat;
        // background-size: 100% 100%;
        overflow: hidden;

        .slider_container {
            width: calc(~'100% - 80px');
            margin: 0 auto;
            margin-top: 15px;
        }

        :global(.slick-list) {
            height: 323px;
        }

        :global(.slick-active) {
            &li {
                width: 100px !important;
            }

            // button:before {
            //   content: "" !important;
            //   width: 10px !important;
            //   height: 10px !important;
            //   border-radius: 50%;
            //   opacity: 1 !important;
            //   background: #fff !important;
            // }
        }

        :global(.slick-dots) {
            li {
                width: 10px !important;
                display: none;
                // 轮播图底部点
                // button:before {
                //   content: "" !important;
                //   width: 10px !important;
                //   height: 10px !important;
                //   border-radius: 50%;
                //   opacity: 0.5 !important;
                //   background: #fff !important;
                // }
            }
        }

        button:before {
            border-radius: 50%;
            background: rgba(92, 90, 90, 0.2) !important;
        }

        :global {
            .slick-prev:before,
            .slick-next:before {
                color: rgba(92, 90, 90, 1) !important;
            }
        }

        // :global(.slick-dots) li button:before {
        //   width: 10px;
        //   height: 10px;
        //   border-radius: 50%;
        //   opacity: 1;
        //   background-color: #fff;
        // }

        .evaluate_title {
            // color: #fff;
            display: flex;
            justify-content: center;
        }

        .evaluate_Slider_item {
            display: flex;
            flex: 0 0 670px;
            height: 273px;
            border-radius: 8px;
            background-color: #fff;
            flex-direction: column;
            font-size: 14px;
            color: #606266;
            padding: 20px;

            .evaluate_name {
                font-size: 20px;
                line-height: 26px;
                font-weight: 700;
                margin-bottom: 7px;
                color: #000;
            }

            .evaluate_scroll {
                font-size: 16px;
                line-height: 21px;
                color: #606266;
                margin-bottom: 10px;
            }

            .evaluate_start {
                :global(.ant-rate) {
                    margin-left: 16px;
                }
            }

            .evaluate_desc {
                margin-top: 20px;
            }
        }

        :global(.slick-track) {
            display: flex;
            gap: 20px;
        }
    }
}
